<template>
    <el-row :gutter="20">
        <!-- 数据统计卡片 -->
        <el-col :span="6">
            <el-card class="box-card">
            <div class="card-header">
                <i class="el-icon-view" style="color: #409EFF;"></i>
                <span>浏览量</span>
            </div>
            <div class="card-content">
                <el-statistic :value="statsData.view_count" />
                <div class="statistic-footer">
                    <div class="footer-item">
                        <span>than yesterday</span>
                        <span class="green">
                        24%
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                        </span>
                    </div>
                </div>
            </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
            <div class="card-header">
                <i class="el-icon-news" style="color: #67C23A;"></i>
                <span>点击量</span>
            </div>
            <div class="card-content">
                <el-statistic :value="statsData.click_count" />
                <div class="statistic-footer">
                    <div class="footer-item">
                        <span>month on month</span>
                        <span class="red">
                        12%
                        <el-icon>
                            <CaretTop />
                        </el-icon>
                        </span>
                    </div>
                </div>
            </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
            <div class="card-header">
                <i class="el-icon-user" style="color: #E6A23C;"></i>
                <span>访问量</span>
            </div>
            <div class="card-content">
                <el-statistic :value="statsData.visit_count" />
                <div class="statistic-footer">
                    <div class="footer-item">
                        <span>than yesterday</span>
                        <span class="green">
                        16%
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                        </span>
                    </div>
                </div>
            </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
            <div class="card-header">
                <i class="el-icon-pie-chart" style="color: #F56C6C;"></i>
                <span>转化率</span>
            </div>
            <div class="card-content">
                <el-statistic :value="statsData.conversion_rate" :precision="1" suffix="%" />
                <div class="statistic-footer">
                    <div class="footer-item">
                        <span>than yesterday</span>
                        <span class="green">
                        23%
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                        </span>
                    </div>
                </div>
            </div>
            </el-card>
        </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="8">
            <el-card class="box-card">
            <template #header>
                <div  class="clearfix">
                    <span>用户分布（条状图）</span>
                </div>
            </template>
            <div ref="barChart" style="width: 100%; height: 300px;"></div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="box-card">
            <template #header >
                <div class="clearfix">
                    <span>用户状态（饼状图）</span>
                </div>

            </template>
            <div ref="pieChart" style="width: 100%; height: 300px;"></div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="box-card">
            <template #header>
                <div class="clearfix">
                    <span>用户活跃度（折线图）</span>
                </div>

            </template>
            <div ref="lineChart" style="width: 100%; height: 300px;"></div>
            </el-card>
        </el-col>
    </el-row>

    <!-- 系统介绍 -->
    <el-card class="box-card" style="margin-top: 20px;">
        <template #header>
            <div class="clearfix">
            <span>系统介绍</span>
            </div>
        </template>
        <div style="line-height: 1.8; color: #333; padding: 0 15px;">
            <p>欢迎来到十方智育的后台管理系统！十方智育是一个综合性教育平台，致力于为用户提供了一个全面心理健康支持和学习环境。该系统主要由三大模块组成：心理模块、咨询师模块和用户模块。</p>
            <br>
            <p>心理模块为用户提供了一个全方位的心理健康支持服务。用户可以通过心理评估工具进行自我评估，了解自己的心理状态。系统提供了详尽的心理健康教育资源，包括心理健康知识、心理调适技巧和心理成长课程等。</p>
            <br>
            <p>咨询师模块是系统的核心部分之一，为专业心理咨询师提供了一个在线工作平台。咨询师可以在这里展示自己的专业资质、服务领域和经验背景，与用户进行在线沟通和咨询。系统支持多种咨询方式，包括文字咨询、语音咨询和视频咨询等，确保咨询师能够根据用户需求提供个性化的心理支持。</p>
            <br>
            <p>用户模块则为用户提供高质量的学习和互动体验。用户可以方便地浏览和学习各类心理健康课程，参与心理健康活动，与咨询师和其他用户进行交流。系统注重用户隐私保护，采用多重安全措施确保用户数据的安全性。同时，用户可以根据自己的需求选择不同的服务套餐，获得个性化的心理支持和学习方案。</p>
            <br>
            <p>十方智育系统的设计理念是以用户为中心，通过整合优质的心理资源和专业的咨询师团队，为用户提供了一个可信赖的、高效的心理健康支持和学习平台。我们致力于帮助每一位用户提升心理健康水平，促进个人成长和发展。</p>
        </div>
    </el-card>
</template>

<script>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import { CaretTop, CaretBottom } from "@element-plus/icons-vue";

export default {
  name: "Shouye",
    components: {
        CaretTop,
        CaretBottom,
        
    },
  setup() {
    const statsData = ref({
      view_count: 0,
      click_count: 0,
      visit_count: 0,
      conversion_rate: 0,
    });
    const userTableData = ref([
      {
        id: 1,
        name: "张三",
        email: "zhangsan@example.com",
        role: "管理员",
        status: "active",
      },
      {
        id: 2,
        name: "李四",
        email: "lisi@example.com",
        role: "用户",
        status: "active",
      },
      {
        id: 3,
        name: "王五",
        email: "wangwu@example.com",
        role: "用户",
        status: "inactive",
      },
      {
        id: 4,
        name: "赵六",
        email: "zhaoliu@example.com",
        role: "用户",
        status: "active",
      },
    ]);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(100);

    // 初始化图表
    const barChart = ref(null);
    const pieChart = ref(null);
    const lineChart = ref(null);

    const initCharts = () => {
      // 条状图
      const barChartInstance = echarts.init(barChart.value);
      barChartInstance.setOption({
        title: {
          text: "用户分布",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["北京", "上海", "广州", "深圳", "成都"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "用户数",
            type: "bar",
            data: [120, 200, 150, 80, 70],
          },
        ],
      });

      // 饼状图
      const pieChartInstance = echarts.init(pieChart.value);
      pieChartInstance.setOption({
        title: {
          text: "用户状态",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: "center",
          data: ["活跃", "非活跃"],
        },
        series: [
          {
            name: "用户状态",
            type: "pie",
            radius: "50%",
            data: [
              { value: 700, name: "活跃" },
              { value: 300, name: "非活跃" },
            ],
          },
        ],
      });

      // 折线图
      const lineChartInstance = echarts.init(lineChart.value);
      lineChartInstance.setOption({
        title: {
          text: "用户活跃度",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["1月", "2月", "3月", "4月", "5月", "6月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "活跃度",
            type: "line",
            data: [820, 932, 901, 934, 1290, 1330],
          },
        ],
      });
    };

    // 编辑用户
    const handleEdit = (index, row) => {
      console.log("编辑用户:", index, row);
      // 这里可以实现编辑用户的逻辑
    };

    // 删除用户
    const handleDelete = (index, row) => {
      console.log("删除用户:", index, row);
      // 这里可以实现删除用户的逻辑
    };

    // 分页大小改变
    const handleSizeChange = (val) => {
      pageSize.value = val;
      // 这里可以实现分页大小改变的逻辑
    };

    // 分页页数改变
    const handleCurrentChange = (val) => {
      currentPage.value = val;
      // 这里可以实现分页页数改变的逻辑
    };

    // 使用脚本实现简单的动画效果
    const animateStats = () => {
      const duration = 1500; // 动画持续时间（毫秒）
      const startValues = {
        view_count: 0,
        click_count: 0,
        visit_count: 0,
        conversion_rate: 0
      };
      const endValues = {
        view_count: 12345,
        click_count: 6789,
        visit_count: 5678,
        conversion_rate: 25.5
      };
      const increments = {};
      const steps = {};

      for (const key in endValues) {
        increments[key] = endValues[key] - startValues[key];
        steps[key] = Math.ceil(duration / 30); // 每30毫秒更新一次
      }

      const startTimestamp = Date.now();

      const updateAnimation = () => {
        const elapsed = Date.now() - startTimestamp;
        const progress = Math.min(elapsed / duration, 1);

        for (const key in endValues) {
          const value = startValues[key] + increments[key] * progress;
          if (key === 'conversion_rate') {
            statsData.value[key] = value.toFixed(1);
          } else {
            statsData.value[key] = Math.floor(value).toLocaleString();
          }
        }

        if (progress < 1) {
          setTimeout(updateAnimation, 30);
        }
      };

      updateAnimation();
    };

    onMounted(() => {
      initCharts();
      animateStats();
    });

    return {
      statsData,
      userTableData,
      currentPage,
      pageSize,
      total,
      barChart,
      pieChart,
      lineChart,
      handleEdit,
      handleDelete,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped>
.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.box-card {
  height: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.card-header i {
  margin-right: 10px;
  font-size: 20px;
}

.card-content {
    color: black;
    font-size: 24px;
  font-weight: bold;
  text-align: center;
  height: 50px; /* 确保有一定的高度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
  margin-left: 30px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}
</style>